<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Net SafeIO HTTP Server Web UI</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Net SafeIO HTTP Server Web UI</h1>
            <p>一个简单易用的键值对数据管理系统</p>
        </header>

        <main>
            <section class="data-operations">
                <h2>数据操作</h2>
                
                <div class="operation-forms">
                    <!-- 添加/更新数据表单 -->
                    <div class="form-container">
                        <h3>添加/更新数据</h3>
                        <form id="addUpdateForm">
                            <div class="form-group">
                                <label for="key">键:</label>
                                <input type="text" id="key" name="key" required>
                            </div>
                            <div class="form-group">
                                <label for="value">值:</label>
                                <input type="text" id="value" name="value" required>
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>

                    <!-- 查询数据表单 -->
                    <div class="form-container">
                        <h3>查询数据</h3>
                        <form id="searchForm">
                            <div class="form-group">
                                <label for="searchKey">键:</label>
                                <input type="text" id="searchKey" name="searchKey">
                            </div>
                            <button type="submit" class="btn btn-secondary">查询</button>
                        </form>
                        <div id="searchResult" class="search-result"></div>
                    </div>
                </div>
            </section>

            <section class="data-display">
                <h2>所有数据</h2>
                <div class="data-actions">
                    <button id="refreshBtn" class="btn btn-secondary">刷新数据</button>
                    <button id="clearAllBtn" class="btn btn-danger">清空所有数据</button>
                </div>
                <div class="table-container">
                    <table id="dataTable">
                        <thead>
                            <tr>
                                <th>键</th>
                                <th>值</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="dataTableBody">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                    <div id="noDataMessage" class="no-data-message" style="display: none;">
                        暂无数据
                    </div>
                </div>
            </section>

            <section class="bulk-operations">
                <h2>批量操作</h2>
                <div class="form-container">
                    <h3>导入/导出JSON数据</h3>
                    <div class="bulk-actions">
                        <button id="exportBtn" class="btn btn-secondary">导出数据</button>
                        <label for="importFile" class="btn btn-primary">导入数据</label>
                        <input type="file" id="importFile" accept=".json" style="display: none;">
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 编辑模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>编辑数据</h2>
            <form id="editForm">
                <div class="form-group">
                    <label for="editKey">键:</label>
                    <input type="text" id="editKey" name="editKey" readonly>
                </div>
                <div class="form-group">
                    <label for="editValue">值:</label>
                    <textarea id="editValue" name="editValue" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>确认删除</h2>
            <p>您确定要删除这条数据吗？此操作不可撤销。</p>
            <div class="modal-actions">
                <button id="confirmDeleteBtn" class="btn btn-danger">确认删除</button>
                <button id="cancelDeleteBtn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="notification"></div>

    <script src="static/js/script.js"></script>
</body>
</html>